<template>
  <div class="nav-bar">
    <!-- 将通过当前路由的路径判断展示的导航栏 -->
    <template v-if="route.path.search('home') == 1">
      <div class="nav-item">
        <span class="title current">
          <i class="iconfont icon-house"></i>
          首页
        </span>
      </div>
    </template>
    <!-- 总体管理页面 -->
    <template v-else-if="route.path.search('manager') == 1">
      <div class="nav-item">
        <span class="title current">
          <i class="iconfont icon-house"></i>
          总体管理
        </span>
      </div>
    </template>
    <template v-else>
      <div v-for="(item, index) in items" :key="item.title + index" class="nav-item">
        <span
          class="title"
          :class="{ current: route.meta.nav && route.meta.nav.search(item.path) > - 1 }"
          v-debounce="{ fn: Leava(item.path) }"
        >
          <i :class="item.class"></i>
          {{ item.title }}
        </span>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRoute, useRouter } from "vue-router";
import { humpName } from "../utils/tools";
export default defineComponent({
  name: "NavBar",
});
</script>

<script lang='ts' setup>
interface item {
  class: string;
  title: string;
  path: string;
}
const route = useRoute();
const router = useRouter();

let items: Array<item> = [
  {
    class: "iconfont icon-wenbenzhaiyao",
    title: "信息登记",
    path: "enrollment",
  },
  {
    class: "iconfont icon-shezhi",
    title: "快速管理",
    path: "quick-manage",
  },
  {
    class: "iconfont icon-hezuo",
    title: "报名信息",
    path: "information",
  },
  {
    class: "iconfont icon-zhuzhuangtu1",
    title: "数据管理",
    path: "data-manage",
  },
]
//跳转到其他页面
function Leava(path: string) {
  const pre = route.path.search('association') == 1 ? 'A' : 'D'
  router.push({ name: pre + humpName(path) });
}
</script>

<style lang="scss">
$colors: (
  "t-blue": #21618d,
  //常用颜色--蓝
    "t-grey": #8a8888,
  //字体常用颜色--灰
    "t-white": #f5f5f5,
  //字体常用颜色--白
    "border": #707070 //边框颜色,,,,,,,
);
.nav-bar {
  margin-left: 55.5px;
  width: 300px;
  .nav-item {
    color: map-get($map: $colors, $key: t-grey);
    margin-bottom: 41.5px;
    padding-bottom: 15px;
    border-bottom: 1px solid map-get($map: $colors, $key: t-grey);
    span {
      font-size: 30px;
      font-weight: bold;
      cursor: pointer;
      i {
        font-size: 20px;
      }
      &:hover {
        color: map-get($map: $colors, $key: t-blue);
      }
    }
    .current {
      color: map-get($map: $colors, $key: t-blue);
    }
  }
}
</style>